
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Score Board</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="docs.css">
</head>
<body>
<div class="container-fluid">
  <script src="menu.js"></script>
  <div class="content p-3">
    <div class="container-fluid">
      <h2>Score Board</h2>
      <hr>
      <canvas id="score-board" width="200" height="200"></canvas>

      <h5 class="mt-3">Html</h5>
  <pre><code><!-- Defalut view dimension 200 x 200. Flexible view width and height. -->
<canvas id="score-board" width="200" height="200"></canvas></code></pre>

      <h5>JavaScript</h5>
<pre><code>/* Options */
var options = {
  // Sort in ascending or descending order. Use 'asc' for ascending. Use 'desc' for descending.
  order: 'asc', 
  // Row height.
  rowHeight: 40,
  // Vertical space between two rows.
  space: 0,
  // Animation speed.
  speed: 10,
  // Global text font.
  font: '20px Arial'
};

/* Constructor */
var scoreBoard = new zeu.ScoreBoard('score-board', options);

/* Function */
// Add a row to the scoreboad. The rows in the board will be sorted by score.
scoreBoard.add({
  // Unique row id.
  id: 'row-1',
  // Score number.
  score: 10,
  // Background color.
  bgColor: '#f32617',
  // Text.
  text: {
    // Text value.
    value: 'Text Value',
    // Text color.
    color: '#ffffff',
    // X offset from the left of the row.
    xOffset: 15,
    // Y offset from the top of the row.
    yOffset: 28
  }
});

// Update a row by id. The rows in the board will be reordered.
scoreBoard.update({
  // Unique row id.
  id: 'row-1',
  // Score number.
  score: 10,
  // Background color.
  bgColor: '#f32617',
  // Text.
  text: {
    // Text value.
    value: 'Text Value',
    // Text color.
    color: '#ffffff'
  }
});

// Remove a row by id. The rows in the board will be reordered.
scoreBoard.remove('row-1');
</code></pre>

    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="docs.js"></script>
<script src="../dist/zeu.js"></script>
<script type="text/javascript">

var options = {
  viewWidth: 200,
  viewHeight: 200,
  order: 'asc', // 'desc'
  rowHeight: 40,
  space: 0,
  speed: 10,
  font: '20px Arial'
};

var scoreBoard = new zeu.ScoreBoard('score-board', options);

var red = ['#f32617', '#f6665c', '#f98d85', '#fbb3ae', '#fdd9d6'];
var time = 500;
// Add
for (var i = 1; i <= 5; i++) {
  setTimeout(function(index) {
    scoreBoard.add({
      id: 'p' + index,
      score: index,
      bgColor: red[index - 1],
      text: {
        value:  'P' + index + '  Score: ' + index,
        xOffset: 15,
        yOffset: 28
      }
    });
  }, time, i);
  time += 500;
}

// Update
for (var j = 0; j <= 2; j++) {
  setTimeout(function(index) {
    for (var i = 1; i <= 5; i++) {
      var score = getRandomInt(1, 10);
      scoreBoard.update({
        id: 'p' + i,
        score: score,
        text: {
          value: 'P' + i + '  Score: ' + score
        }
      });
    }
  }, time);
  time += 800;
}

// Remove
for (var i = 5; i >= 1; i--) {
  setTimeout(function(index) {
    scoreBoard.remove('p' + index);
  }, time, i);
  time += 700;
}

</script>
</body>
</html>

